<script>
import { queryBtnList } from '@/api/permissions'
const isPermission = process.env.VUE_APP_PERMISSION === 'open'
function findCTableBox(children) {
  if (!(children instanceof Array)) return
  for (const c of children) {
    if (c.$options.name === 'CTableBox') {
      return c
    }
    if (c.$children) {
      const ctb = findCTableBox(c.$children)
      if (ctb) {
        return ctb
      }
    }
  }
}
export default {
  name: 'CPermissionTabs',
  // abstract: true,
  props: {
    value: {
      type: String,
      default: ''
    },
    code: {
      type: String,
      default: ''
    },
    lazy: {
      type: Boolean,
      default: true
    },
    refresh: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      curtab: '',
      permissionList: [],
      tipText: ''
    }
  },
  watch: {
    curtab: {
      handler(v, o) {
        this.$emit('input', v)
        this.$emit('change', v, o)
      }
    },
    value: {
      handler(v) {
        this.curtab = v
      },
      immediate: true
    }
  },
  created() {
    this.getPermissionList()
  },
  methods: {
    getPermissionList() {
      const code = this.code
      if (!isPermission || code === '') return
      const menuCode = this.$route.query.menuCode
      queryBtnList(menuCode, code).then(res => {
        this.permissionList = res.data.groovyList.map(e => e.buttonCode)
        this.tipText = ''
      }).catch(e => {
        this.tipText = e.message ? '标签权限错误：' + e.message : '获取tabs权限错误！'
      })
    },
    switchTab(v) {
      this.curtab = v
    },
    // 27977   【装修任务管理、设计任务管理】切换页签后，列表数据未按照查询内容匹配数据展示
    tabClick(ins) {
      if (!this.refresh) return
      const ctb = findCTableBox(ins.$children)
      if (ctb) {
        ctb.getTableBox().initTableData('onPage')
      }
      this.$emit('tab-click', ins)
    }
  },
  render(h) {
    if (this.tipText) {
      return h('el-alert', { style: { marginTop: '10px' }, props: { title: this.tipText, type: 'error', closable: false }})
    }
    const vnode = this.$scopedSlots.default ? this.$scopedSlots.default() : []
    const tabs = []
    if (isPermission && this.code !== '') {
      for (const node of vnode) {
        node.componentOptions ? '' : node.componentOptions = {}
        const options = node.componentOptions.propsData || {}
        options.lazy = this.lazy
        const attrs = ((node.data || {}).attrs || {})
        const optCode = attrs.optCode || attrs['opt-code'] || options.name
        if (this.permissionList.includes(optCode)) {
          tabs.push(node)
        }
      }
    } else {
      for (const node of vnode) {
        node.componentOptions ? '' : node.componentOptions = {}
        const options = node.componentOptions.propsData || {}
        options.lazy = this.lazy
        tabs.push(node)
      }
      // tabs = vnode
    }

    if (!/[a-zA-Z]+/.test(this.curtab) && tabs.length > 0) {
      this.curtab = (tabs[0].componentOptions.propsData || {}).name
    }
    const on = { ...this.$listeners }
    delete on.input
    delete on.tabClick
    delete on['tab-click']
    on.input = this.switchTab
    on['tab-click'] = this.tabClick
    return h('el-tabs', { props: { ...this.$attrs, value: this.curtab }, on }, tabs)
  }
}
</script>
